<template>
  <el-dialog
    title="设备状态报警信息详情"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    width="700px"
    :before-close="handleClose">
    
    <el-form
      ref="formRef"
      :model="formData"
      label-width="120px"
      disabled>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备编码">
            <el-input v-model="formData.devCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称">
            <el-input v-model="formData.devName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备状态">
            <el-input v-model="formData.devStatusValue" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警时间">
            <el-input :value="formatDateTime(formData.createTime)" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="设备报警信息">
        <el-input
          v-model="formData.devError"
          type="textarea"
          :rows="4"
          readonly />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: () => ({})
  }
})

// 定义 emits
const emit = defineEmits(['update:visible', 'close'])

// 响应式数据
const formRef = ref()

// 日期时间格式化
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 监听 visible 变化
watch(() => props.visible, (newVal) => {
  // 可以在这里添加打开弹窗时的逻辑
})

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 暴露方法给父组件
defineExpose({})
</script>

<style scoped>
/* 弹窗样式优化 */
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}
</style>